<template>
  <div class="xiangqingye">
    <div class="top">
      <van-nav-bar title="店铺详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>

    <div class="top-ai" :style="{backgroundImage:'url(' + (info && info.poi_back_pic_url) +')' }">
      <div class="img">
        <img :src="info && info.picUrl" alt="">
      </div>
      <div class="main">{{info.name}}</div>

      <div class="right" v-if='panduanchengli' @click='clear_merchat(info)' style="color:red">❤</div>
      <div class="right" v-else @click='push_merchat(info)'>❤</div>

    </div>

    <div class="bottom">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.name" v-for='(item,index) in idData' :key="index" />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="shopping" v-for="(item,index) in  idData[activeKey].goodlist" :key="index">
          <div class="imgage">
            <img :src="item.picture" alt="">
          </div>
          <div class="right-box">
            <div class="left">
              <div class="title">{{item.name}}</div>
              <!-- <div class="count">{[]}</div> -->
              <div class="yueshou">{{item.month_saled_content}}&nbsp;&nbsp; {{item.promotion_info}}&nbsp;&nbsp; {{item.unit}}</div>
            </div>

            <div class="right">
              <span>￥<span class="keji">{{item.min_price}}</span> </span>
              <div class="anniu">+</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>


<script>
import { Toast } from 'vant';
import { shopinfo_id } from '../axios/api'
import { Dialog } from 'vant';
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      activeKey: 0,
      idData: {},
      info: {},
    };
  },
  mounted() {
    shopinfo_id({ id: this.$route.params.name }).then(
      response => {
        if (response.data.code == 200) {
          this.idData = response.data.shopinfo.taglist
          this.info = response.data.shopinfo.info

          Toast.clear()
        } else {
          Dialog.alert({ title: 'hi!', message: '商家凉咯，换一家吧', theme: 'round-button', }).then(() => { this.$router.go(-1) });
        }
      }
    ),
      console.log(this.idData.goodlist);
  },

  computed: {
    ...mapState(['merchant']),

    panduanchengli() {
      var index = this.merchant.findIndex((item) => {
        return item.mtWmPoiId == this.info.mtWmPoiId;
      })
      return index !== -1
    },
  },
 
  methods: {
    onClickLeft() {
      this.$router.go(-1)
      Toast('返回');
    },
    ...mapMutations(['push_merchat', 'clear_merchat'])
  },
};
</script>

<style lang='scss' scoped>
.top-ai {
  width: 100%;
  height: 110px;
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: pink;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .main {
    width: 70%;
    height: 30px;
    // background-color: oldlace;
    line-height: 30px;
    color: #fff;
  }
  .right {
    width: 10%;
    height: 30px;
    text-align: right;
    font-size: 20px;
    padding-right: 10px;
  }
}
.bottom {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 18%;
    height: 100%;
    // background-color: aqua;
  }
  .right {
    flex: 1;
    height: 100%;
    // background-color: pink;

    .shopping {
      width: 100%;
      height: 150px;
      //   background-color: antiquewhite;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .imgage {
        width: 35%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        img {
          width: 80%;
          height: 80%;
        }
      }
      .right-box {
        flex: 1;
        height: 100%;
        .title {
          font-weight: 600;
          font-size: 20px;
        }

        .left {
          width: 100%;
          height: 60%;

          .yueshou {
            margin-top: 15px;
            color: gray;
          }
        }
        .right {
          width: 100%;
          height: 40%;
          //   background-color: red;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: red;
          }
          .keji {
            font-size: 24px;
            color: red;
          }

          .anniu {
            width: 30px;
            height: 30px;
            background-color: aqua;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>